<template>
	<view class="pay">
		<view class="total">
			订单金额
			<text>￥{{ price }}</text>
		</view>
		<view class="cut-off"></view>
		<view class="ul">
			<view class="way">支付方式</view>
			<view class="li" @click="weixinpay()">
				<image src="/static/img/pay_wx.png" class="ico" />
				<view class="txt">
					<view class="name">微信支付</view>
					<view class="describe">亿万用户的选择，更快更安全</view>
				</view>
			</view>

			<view class="li" @click="alipay()">
				<image src="/static/img/pay_zfb.png" class="ico" />
				<view class="txt">
					<view class="name">支付宝</view>
					<view class="describe">支付宝支付，更快捷，更方便</view>
				</view>
			</view>
		</view>
		<!-- <view class="sub">去支付</view> -->
	</view>
</template>

<script>
	import pay from '../../../servers/order/pay.js';
	export default {
		data() {
			return {
				price: '0.00',
				orderid: null,
				identificationCode: null,
				type: 0
			};
		},
		onShow() {
			if (this.orderid) {
				this.ispay();
			}
		},
		mounted() {
			var _this = this;
			uni.getStorage({
				key: 'order',
				success: function(res) {
					if (res) {
						_this.orderid = res.data.id;
						_this.price = res.data.price;
						_this.identificationCode = res.data.identificationCode
					}
				}
			});
		},
		methods: {
			weixinpay() {
				// #ifdef H5
				if (!this.$jwx.isWechat()) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '请在微信中使用',
					// 	duration: 2000
					// });
					// return;
					var tradeType = 'H5';
				} else {
					var tradeType = 'JSAPI';
					// this.$jwx.initJssdk()
					// return;
				}
				// #endif
				// #ifdef APP-PLUS
				var tradeType = 'H5';
				// #endif
				// #ifdef MP-WEIXIN
				var tradeType = 'XCX';
				// #endif
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				var da = {
					orderId: this.orderid,
					payChannel: 'wx',
					tradeType: tradeType
				};
				// ifndef APP-PLUS
				// 获取订单号
				pay.pay(da)
					.then(res => {
						this.type = 1
						uni.hideLoading();
						// #ifdef APP-PLUS
						plus.runtime.openURL("http://lm.weixingshishang.cn/pay/index.html?id=" + res.data.data.mwebUrl, function(e) {
							uni.showToast({
								title: '唤起支付失败',
								duration: 2000
							});
						})
						// #endif
						// #ifdef H5
						if (tradeType === 'H5') {
							window.open("http://lm.weixingshishang.cn/pay/index.html?id=" + res.data.data.mwebUrl)
						} else {
							// this.$jwx.wxpay(res.data)
							WeixinJSBridge.invoke(
							      'getBrandWCPayRequest', {
							         "appId":res.data.data.appId,     //公众号名称，由商户传入     
							         "timeStamp":res.data.data.timeStamp,         //时间戳，自1970年以来的秒数     
							         "nonceStr": res.data.data.nonceStr, //随机串     
							         "package":res.data.data.package,     
							         "signType":"HA256",         //微信签名方式：     
							         "paySign":res.data.data.paySign //微信签名 
							      },
							      function(res){
							      if(res.err_msg == "get_brand_wcpay_request:ok" ){
							      // 使用以上方式判断前端返回,微信团队郑重提示：
							            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										this.ispay();
							      } 
							   });
						}
						// #endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: '',
							nonceStr: '',
							package: '',
							signType: 'MD5',
							paySign: '',
							orderInfo: 'orderInfo', //微信订单数据
							success: function(res) {
								this.ispay();
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(e) {
								uni.showModal({
									content: '支付失败,原因为: ' + e.errMsg,
									showCancel: false
								});
							}
						});
						// #endif
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
				// endif
			},
			alipay() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.type = 2
				var da = {
					orderId: this.orderid,
					payChannel: 'ali',
					tradeType: 'APP'
				};
				pay.pay(da).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					// var da1 = {
					// 	type: '支付宝支付',
					// 	orderid: this.orderid,
					// 	money: this.price,
					// 	identificationCode:this.identificationCode
					// };
					// uni.setStorage({
					// 	key: 'orderpaytype',
					// 	data: da,
					// 	success: function() {
					// 		uni.navigateTo({
					// 			url: './achieve'
					// 		});
					// 	}
					// });
					// return
					uni.hideLoading();
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data.data, //微信、支付宝订单数据
						success: function(res) {
							this.ispay();
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(e) {
							uni.showModal({
								content: '支付失败,原因为: ' + e.errMsg,
								showCancel: false
							});
						}
					});
				});
			},
			ispay() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				// var da = {
				// 	type: '微信支付',
				// 	orderid: this.orderid,
				// 	money: this.price
				// };
				pay.order(this.orderid)
					.then(res => {
						uni.hideLoading();
						if (res.data.tradeState == 'SUCCESS' && res.data.returnCode == 'SUCCESS') {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							var da = {
								type: this.type = 1 ? '微信支付' : '支付宝支付',
								orderid: this.orderid,
								money: this.price,
								identificationCode: this.identificationCode
							}
							uni.setStorage({
								key: 'orderpaytype',
								data: da,
								success: function() {
									uni.navigateTo({
										url: './achieve'
									});
								}
							});
						} else {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '支付失败',
							duration: 2000
						});
						console.log(new Error('请检查网络后重试'));
					});
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.pay {
		background: #fff;
		height: 100%;

		.total {
			line-height: 127rpx;
			font-size: 30rpx;
			padding: 0 20rpx;

			text {
				float: right;
				font-size: 36rpx;
				color: #bd3c8c;
			}
		}

		.ul {
			.way {
				line-height: 106rpx;
				color: #999;
				padding: 0 20rpx;
				border-bottom: 1rpx solid #e1e1e1;
				/*no*/
			}

			.li {
				display: flex;
				padding: 20rpx;
				border-bottom: 1rpx solid #e1e1e1;

				/*no*/
				image {
					position: relative;
					top: 10rpx;
					width: 70rpx;
					height: 70rpx;
				}

				.txt {
					margin-left: 22rpx;
					flex: 1;
					line-height: 45rpx;

					.name {
						font-size: 30rpx;
					}

					.describe {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.sub {
			border-radius: 45rpx;
			line-height: 90rpx;
			margin: 300rpx 20rpx 0;
			color: #fff;
			text-align: center;
			background: linear-gradient(80deg, #d2158a, #fc6395);
		}

		.cut-off {
			border-top: 1rpx solid #e1e1e1;
			/*no*/
			border-bottom: 1rpx solid #e1e1e1;
			/*no*/
		}
	}
</style>
